<!--
 * @Author: shenya
 * @Date: 2023-08-11 10:43:16
 * @Description: 任务清单
-->
<template>
  <el-dialog
    title="任务反馈详情"
    :visible.sync="visible"
    width="500px"
    append-to-body
  >
    <div class="task">
      <div class="name">任务名称：{{ taskObj.name }}</div>
      <div class="name">任务描述：{{ taskObj.jobDesc }}</div>
      <div class="name">领养时间节点：{{ taskObj.adoptTime }}</div>
      <div class="name">友好提示：{{ taskObj.tips }}</div>
      <div class="name">任务开始时间：{{ taskObj.jobTime }}</div>
      <div class="name">用户反馈时间：{{ taskObj.feedbackTime }}</div>
      <div class="name flex">
        <div>问题反馈详情：</div>
        <div>
          <div
            v-for="(item,index) in taskObj.surveys"
            :key="index"
            class="task-tag"
          >
            <div :class="{'has':item.defaultValue,'nohas':!item.defaultValue}"> {{ item.questionDesc }}</div>
            <div
              v-if="item.defaultValue"
              class="task-flag"
            >
              <span>{{ item.defaultValue }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    taskObj: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.task {
  .name {
    padding: 8px 0px;
  }
  .task-tag {
    position: relative;
    .has {
      width: 200px;
      height: 50px;
      background: #409eff;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      margin-bottom: 5px;
    }
    .nohas {
      width: 200px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      margin-bottom: 5px;
      border: 1px solid;
    }
    .task-flag {
      position: absolute;
      right: 0;
      top: 0;
      width: 30px;
      height: 20px;
      background: #e8e9e8;
      span {
        margin-left: 8px;
      }
    }
  }
}
</style>
